<script setup>
import {ref,reactive} from "vue"
import {onLoad} from '@dcloudio/uni-app'
import btnModule from '../../components/index/btnModule.vue'
import { httpRequest } from "../../utils/http";
const obj = ref({})
onLoad((e)=>{
    obj.value = JSON.parse(decodeURIComponent(e.obj))
    console.log(obj.value);
    getShopKa()
})
const shopKaList = ref([])
const getShopKa = async() => {
       httpRequest('/api/getShopKa','POST',{
          businessId:uni.getStorageSync('business').businessId,
          shopId:obj.value.shopId
      }).then(res=>{
        shopKaList.value = res.data[0]
        console.log(shopKaList.value);
      })
    }
   
const timestamp2Time = (time)=>{
	  // 使用Date对象将时间戳转换为日期对象
		const date = new Date(time);
		// 获取日期的各个部分，如年、月、日、时、分、秒
		const year = date.getFullYear(); // 年
		const month = date.getMonth() + 1; // 月 (注意月份从0开始，需要加1)
		const day = date.getDate(); // 日
		const hours = date.getHours(); // 时
		const minutes = date.getMinutes(); // 分
		const seconds = date.getSeconds(); // 秒

		// 构建日期字符串，例如：2022-10-08 14:30:00
		const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		const ymdData = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`// 输出格式化后的日期字符串
		return ymdData
		 }
const inputDialog = ref(null)
const getRenew = () => {
    uni.pageScrollTo({ scrollTop: 0 })
   inputDialog.value.open('center')
}
const kaMi = ref('')
const dialogInputConfirm = async(e) => {
    if(!kaMi.value)return uni.showToast({
        title: '输入不能为空',
        icon: 'none'
    })
    const res = await httpRequest('/api/shopRenewal','POST',{
        shopId:obj.value.shopId,
        kaMi:kaMi.value
      })
      kaMi.value = ''
      console.log(res);
      if(res.code=='0'){
        uni.showToast({title:'续费成功',icon:'none'})
        obj.value = res.data
      }else{
        uni.showToast({title:'卡密无效或已被使用',icon:'none'})
      }
}
</script>

<template>
  <view class="page">
    <view class="limit">
        <view style="display: flex;flex-direction: column;justify-content: space-between;">
            <text>可用合成额度</text>
            <text><text style="font-size: 56rpx;font-weight: 700;">{{obj.ka?obj.ka.useNum:0}}</text>次</text>
        </view>
        <image style="width: 136rpx;height: 109rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_czspin.png"/>
    </view>
    <view class="message">
        <view class="item">
            <text class="name">卡密</text>
            <text>{{obj.ka?obj.ka.kaMi:shopKaList.kaMi}}</text>
        </view>
        <view class="item">
            <text class="name">店铺头像</text>
            <image style="width: 80rpx;height: 80rpx;" :src="obj.shopImgPath?obj.shopImgPath:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_dianpu@3x.png'"/>
        </view>
        <view class="item">
            <text class="name">店铺名称</text>
            <text>{{obj.shopName}}</text>
        </view>
        <view class="item">
            <text class="name">行业</text>
            <text>{{obj.shopCate1Obj.shopCate1Name + '-' +obj.shopCate2Obj.shopCate2Name}}</text>
        </view>
        <view class="item">
            <text class="name">地区</text>
            <view style="width: 500rpx;text-align: right;">
                <text>{{ obj.province==obj.urbanarea?obj.urbanarea:obj.province + '-' + obj.urbanarea }}</text>
                <view style="font-size: 24rpx;margin-top: 6rpx;display: flex;align-items: center;justify-content: flex-end;">
                    <image style="width: 28rpx;height: 28rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_icon_ddianpoi.png" mode="" />{{ obj.shopAddress }}
                </view>
            </view>
        </view>
    </view>
    <view class="edition">
        <view class="data">
            <text>购买版本</text>
            <text style="font-size: 28rpx;color: rgb(144, 147, 153);">{{ obj.ka?obj.ka.productName:shopKaList.productName }}</text>
        </view>
        <view class="data">
            <text>开通日期</text>
            <text style="font-size: 28rpx;color: rgb(144, 147, 153);">{{timestamp2Time(Number(obj.ka?obj.ka.createDate:shopKaList.createDate))}}</text>
        </view>
        <view class="data">
            <text>有效期至</text>
            <text style="font-size: 28rpx;color: rgb(144, 147, 153);">{{timestamp2Time(obj.ka?obj.ka.endDate:shopKaList.endDate)}}</text>
        </view>
    </view>
    <!-- <view class="renew">
        <button class="renew-btn">续费</button>
    </view> -->
    <btn-module message="续费" @customClick="getRenew" />
  </view>
  <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose" type="info" title="请输入卡密" @confirm="dialogInputConfirm"> 
          <input style="border: 1px solid rgb(144,147,153);font-size: 22rpx;border-radius: 8rpx;width: 400rpx;" type="text" v-model="kaMi">
        </uni-popup-dialog>    
          
		</uni-popup>
</template>

<style lang="scss" scoped>
    .page{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(241,241,241);
        padding-bottom: 250rpx;
        .limit{
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 30rpx;
            left: 30rpx;
            width: 690rpx;
            height: 228rpx;
            border-radius: 16rpx;
            background:linear-gradient(135deg,rgba(155,133,255,1)0%,rgba(180,83,245,1)100%);
            font-size: 36rpx;
            color: #fff;
            padding: 38rpx 75rpx;
        }
        .message{
            box-sizing: border-box;
            width: 100%;
            height: 786rpx;
            background-color: #fff;
            margin-top: 148rpx;
            padding: 170rpx 30rpx 30rpx 30rpx;
            border-radius: 32rpx 32rpx 0 0;
            .item{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                color: rgb(144,147,153);
                margin-bottom: 60rpx;
                :last-child{
                    margin-bottom: 0;
                }
                .name{
                    font-size: 32rpx;
                    color: rgb(48,49,51);
                }
            }
        }
        .edition{
            background-color: #fff;
            margin-top: 24rpx;
            .data{
            box-sizing: border-box;

                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 108rpx;
                padding: 0 30rpx;
                font-size: 32rpx;
                color: rgb(48,49,51);
            }
        }
        .renew{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 166rpx;
            background-color: #fff;
            border-top: 1px solid rgb(220,223,230);
            padding-top: 10rpx;
            .renew-btn{

            }
        }
    }
</style>
